import { size, IFormProps, pageSize, dateTimeFormat, formItemLayout, getUploadResult, uploadUrl, tailFormItemLayoutLeft, tailFormItemLayout, getFileList, getImages, dateFormat, getToken } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Button, Input, Table, Popconfirm, Select, message, Tabs, InputNumber, Checkbox } from 'antd';
import moment from 'moment';
const Styles = require("../../styles/index.less");
import queryString from 'query-string';
import * as api from '../../api/api';
import Uploads from '../../components/Uploads';
import RefundEdit from "../../components/orders/RefundEdit";
const TabPane = Tabs.TabPane;

export interface IRefundPros extends IFormProps {
    refund: any
}
class Refund extends React.PureComponent<IRefundPros, any>{
    constructor(props) {
        super(props);
    }

    state = {
        visible: false,
        pass: false,
        fileList: [],
    }

    componentWillReceiveProps(nextProps: IRefundPros) {
        const images = nextProps.refund && nextProps.refund.vouchers;
        this.setState({ fileList: getFileList(images) });
    }

    getRefund = (id) => {
        this.props.dispatch({
            type: 'refund/getRefund',
            payload: { id }
        });
    }

    reset = () => {
        this.props.form.resetFields();
    }

    reject = () => {
        this.setState({ visible: true, pass: false });
    }

    pass = () => {
        this.setState({ visible: true, pass: true });
    }

    cancel = () => {
        this.setState({ visible: false });
    }

    saveRefund = (form) => {
        const { id } = this.props.refund.refund;
        form['id'] = id;
        this.props.dispatch({
            type: this.state.pass ? 'refund/pass' : 'refund/reject',
            payload: {
                form,
                callback: () => {
                    message.success(this.state.pass ? '审核已通过' : '审核已驳回');
                    this.getRefund(id);
                    this.cancel();
                }
            }
        })
    }

    render(): JSX.Element {
        //console.log(this.props);
        const { getFieldDecorator } = this.props.form;
        const { loading } = this.props;
        const { refund = {} } = this.props.refund;
        const { fileList } = this.state;
        return (
            <Row className={Styles.F_BG_WHITE1}>
                <Row className={Styles.F_BG_WHITE}>
                    <Tabs defaultActiveKey="1">
                        <TabPane tab="退款信息" key="1">
                            <Col span={24}>
                                <Form>
                                    <Form.Item label="退款编号" {...formItemLayout}>
                                        {refund.refundNo}
                                    </Form.Item>
                                    <Form.Item label="订单编号" {...formItemLayout}>
                                        {refund.orderNo}
                                    </Form.Item>
                                    <Form.Item label="商品名称" {...formItemLayout}>
                                        {refund.itemName}
                                    </Form.Item>
                                    <Form.Item label="商品图片" {...formItemLayout}>
                                        <img width='200px' src={refund.itemPicture} />
                                    </Form.Item>
                                    <Form.Item label="规格" {...formItemLayout}>
                                        {refund.spec}
                                    </Form.Item>
                                    <Form.Item label="数量" {...formItemLayout}>
                                        {refund.qty}
                                    </Form.Item>
                                    <Form.Item label="价格" {...formItemLayout}>
                                        {refund.totalPrice}
                                    </Form.Item>
                                    <Form.Item label="申请时间" {...formItemLayout}>
                                        {moment(refund.creationTime).format(dateTimeFormat)}
                                    </Form.Item>
                                    <Form.Item label="处理方式" {...formItemLayout}>
                                        {refund.typeView}
                                    </Form.Item>
                                    <Form.Item label="货物状态" {...formItemLayout}>
                                        {refund.itemStatusView}
                                    </Form.Item>
                                    <Form.Item label="退款原因" {...formItemLayout}>
                                        {refund.reason}
                                    </Form.Item>
                                    <Form.Item label="退款金额" {...formItemLayout}>
                                        {refund.amount}
                                    </Form.Item>
                                    <Form.Item label="买家手机号码" {...formItemLayout}>
                                        {refund.phoneNumber}
                                    </Form.Item>
                                    <Form.Item label="备注" {...formItemLayout}>
                                        {refund.remark}
                                    </Form.Item>
                                    {/* <Form.Item label="凭证" {...formItemLayout}>
                                        <Uploads editable={false} fileList={fileList} />
                                    </Form.Item> */}
                                    <Form.Item label="退款状态" {...formItemLayout}>
                                        {refund.statusView}
                                    </Form.Item>
                                    {
                                        refund.status > 1 ?
                                            (<Form.Item label="处理时间" {...formItemLayout}>
                                                {moment(refund.refundTime).format(dateTimeFormat)}
                                            </Form.Item>) : (null)
                                    }
                                    {
                                        refund.status > 1 ?
                                            (
                                                <Form.Item label="处理意见" {...formItemLayout}>
                                                    {refund.closeReason}
                                                </Form.Item>
                                            ) : (null)
                                    }
                                    <Form.Item {...tailFormItemLayout}
                                    >
                                        {
                                            refund.status == 1 ? (<Button size={size} loading={loading} type="primary" className={Styles.M_RIGHT} onClick={this.pass}>审核通过</Button>) : (null)
                                        }
                                        {
                                            refund.status == 1 ? (<Button size={size} loading={loading} type="primary" className={Styles.M_RIGHT} onClick={this.reject}>驳回</Button>) : (null)
                                        }
                                        <Button size={size} onClick={this.props.history.goBack}>取消</Button>
                                    </Form.Item>
                                </Form>
                            </Col>
                        </TabPane>
                    </Tabs>
                </Row>
                <RefundEdit visible={this.state.visible}
                    onSave={this.saveRefund}
                    onCancel={this.cancel}
                />
            </Row>)
    }
}

export default connect(({ refund, loading: { models: { refund: loading } } }) => ({ refund, loading }))(Form.create()(Refund));
